<template>
	<w-container class='schemeDetails' :loading="isLoading">
		<!--  @click="$u.route('/pages/compound/record')"  -->
		<!-- <w-navbar leftIcon="back-btn" :titleStyle="{color:'#222'}"  :title="title" navType="compound" bgColor="#F5F5F5">
			
		</w-navbar> -->
		<w-navbar :placeholder="false" navType="goods" :title='pageTitle' :bgColor="bgColor" :opacity="opacity"
			:leftIconSize="32" :leftIcon="opacity>0.8?'arrow-left-back':'arrow-left-back'"
			:titleStyle="{color:opacity>0.8?'#222':'#fff'}" :product="{name:title}">
			<template #right>
				<view class="font-color-white">合成规则</view>
			</template>
		</w-navbar>
		<u-status-bar></u-status-bar>
		<!-- 主图 -->
		<mainImg :src="image" :title="title"></mainImg>
		<!-- 玩法介绍 -->
		<view class="card " style="background-color: #363233;">
			<w-big-title title="玩法描述" :hengxian="false" style="color: #fff;"></w-big-title>
			<view class="mt-12">
				<u-parse class="font-color-white" :content='handleLang(description)'></u-parse>
			</view>
		</view>
		<!-- 选择材料 -->
		<view class="card mt-16 ptb-16" style="background-color: #363233;">
			<w-big-title title="合成材料" :hengxian="false" style="color: #fff;"></w-big-title>
			<changeMaterials :list="rule_text" @change="changeMl"></changeMaterials>
		</view>
		<!-- 合成按钮 -->
		<view class="hc_button">
			<w-button :disabled="isDisabled" @click="confimPop=true">{{handleLang('立即合成')}}</w-button>
			<u-safe-bottom></u-safe-bottom>
		</view>
		<!-- 确认合成弹窗 -->
		<w-toast :cancelText="handleLang('再想想')" v-model="confimPop" :content="getPopContent()" @action="checkCaptcha"></w-toast>
		
		<w-jy-verify ref="captcha" v-if="captchaStatus" @success='submit'></w-jy-verify>
	</w-container> 
</template>

<script>
	import { playInfo,synthesizeNow } from '@/api/compound/index.js';
	import mainImg from './components/mainImg.vue';
	import changeMaterials from './components/changeMaterials.vue';
	import {mapState} from 'vuex'
	import opacityMixin from '@/mixins/opacityNav.js'
	export default {
		data() {
			return {
				confimPop:false,
				isLoading:true,
				param:{
					play_id: '',
					grp: '',
					classify:''
				},
				user_json: [],      // 用户所选藏品
				image:'',
				title:'',
				description:'',
				rule_text:[]
			};
		},
		mixins: [opacityMixin],
		computed:{
			isDisabled(){
				let list = this.user_json;
				let newList = list.filter(item => item.user_collection_ids && (item.user_collection_ids.split(',').length == item.number))
				if(list.length==newList.length){
					return false
				}else{
					return true
				}
			},
			...mapState('config', {
				captchaStatus(state) {
					return !!Number(state.info.synthetic_check)
				}
			})
		},
		components:{ mainImg,changeMaterials },
		onLoad(e) {
			this.param.play_id = e.play_id || '';
			this.param.grp = e.grp || '';
			this.param.classify = e?.classify ?? '';
		},
		onShow() {
			this.getDetails()
		},
		methods:{
			
			// 获取方案详情
			getDetails() {
				playInfo(this.param).then(res=>{
					this.isLoading = false
					let { image,title,description,rule_text } = res.data;
					this.image = image;
					this.title = title;
					this.description = description;
					this.rule_text = rule_text;
					this.user_json = this.getMlData(rule_text);
				}).catch(()=>{ this.isLoading = false })
			},
			
			checkCaptcha(e){
				if(!e) return;
				if(this.captchaStatus){
					this.$refs.captcha.showCaptcha();
				}else{
					this.submit();
				}
			},
			
			// 选择材料
			changeMl(e) {
				this.user_json = this.getMlData(e)
			},
			
			// 材料数据
			getMlData(user_json) {
				return user_json.map(item=>{
					let { collection_ids,number,rule_id,collectionList } = item;
					let collectionListId = collectionList.filter(item=>!!item.id);
					let user_collection_ids = collectionListId.map(item=>item.id).join();
					return { rule_id,collection_ids,user_collection_ids,number }
				})
			},
			// 获取弹窗内容
			getPopContent() {
				let num = eval(this.user_json.map(item=>item.number).join("+"))
				return `您选择了${num}个藏品，合成成功后将进行销毁/回收/保留，确认合成？`
			},
			
			// 确认合成
			submit(validate) {
				this.param.user_json = this.$tools.base64Encode(JSON.stringify(this.user_json))
				uni.showLoading()
				synthesizeNow({
					...this.param,
					...validate
				}).then(res=>{
					res.data.recordId && uni.navigateTo({ url:`/pages/compound/result?id=${res.data.recordId}` })
				}).catch(err=>{})
			}
		}
	}
</script>

<style lang="scss">
	.schemeDetails{
		padding-bottom:calc(200rpx + var(--window-bottom)) ;
		background-color: #544D50;
	}
	.card{
		width: 100%;
		border-radius: 16rpx;
		@extend .pa-12;
		box-shadow: 0px 1px 6px 0px rgba(43,45,57,0.03);
		>.title{
			font-size: 32rpx;
			font-family: 'YouSheBiaoTiHei';
			position: relative;
			z-index: 1;
			&::before{
				content: '';
				width: 40rpx;
				height: 16rpx;
				// background: linear-gradient(90deg, #DF0007 0%, rgba(0,102,254,0) 100%);
				position: absolute;
				left: 6rpx;
				bottom: 10rpx;
				z-index: -1;
			}
		}
	}
	.hc_button{
		width: 100%;
		height: auto;
		position: fixed;
		left: 0;
		bottom: 0;
		box-shadow: 0px -1px 6px 0px rgba(32,36,30,0.05);
		@extend .plr-16,.ptb-7,.bg-color-pageBg;
		background-color: #1E1E1E;
	}
</style>
